<template>
  <view class="main">
    <view class="user dispaly-center" @click="$goUrl(`/subPackage/mine/userInfo`)">
      <view class="user-avatar">
        <image class="avatar-bg" src="/static/mine/tx.png" mode="aspectFill" />
        <image class="avatar"
          src="https://www.bing.com/th/id/OIP.h6Sl0aVRPzCEedtNef4v8wHaE7?w=246&h=186&c=7&r=0&o=5&pid=1.7"
          mode="aspectFill" />
      </view>
      <view class="name">昵称</view>
    </view>
    <view class="money">
      <image class="one-bg" src="/static/mine/one-block.png" mode="aspectFill" />
      <view class="money-box dispaly-just-between">
        <view class="m-left">
          <view class="title">( 账户余额 )</view>
          <view class="money">￥600.00</view>
        </view>
        <view class="m-right dispaly-align-center" @click="$goUrl(`/subPackage/mine/withdrawal`)">提现</view>
      </view>
    </view>
    <view class="option">
      <image class="two-bg" src="/static/mine/two-block.png" mode="aspectFill" />
      <view class="option-box">
        <view class="option-title">( 我的服务 )</view>
        <view class="option-item dispaly-just-between" v-for="(item, index) in MINE_OPTION" :key="index"
          @click="clickItemSkip(item)">
          <view class="left">
            <image :src="item.icon" mode="aspectFill" />
          </view>
          <!--          :style="{borderBottom: item.type == 7 ? 'none' : ''}"-->
          <view class="right dispaly-just-between">
            <view class="name">{{ item.name }}</view>
            <view class="row-right">
              <image class="one-bg" src="/static/mine/right.png" mode="aspectFill" />
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
  <TabBar current-path="/pages/mine/mine" />
</template>

<script setup>
import { MINE_OPTION } from '@/config/base'

const clickItemSkip = (item) => {
  if (item.path) {
    uni.navigateTo({
      url: item.path
    })
  }
}
</script>

<style lang="scss" scoped>
.main {
  padding: 30rpx;
  margin-top: 70rpx;

  .user {
    .user-avatar {
      width: 128rpx;
      height: 128rpx;
      position: relative;

      .avatar-bg {
        width: 128rpx;
        height: 128rpx;
      }

      .avatar {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 128rpx;
        height: 128rpx;
        border-radius: 50%;
      }
    }

    .name {
      margin-left: 40rpx;
      font-size: 35rpx;
    }
  }

  .option {
    position: relative;

    .two-bg {
      width: 692rpx;
      height: 902rpx;
    }

    .option-box {
      box-sizing: border-box;
      padding: 30rpx;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      width: 692rpx;
      height: 902rpx;

      .option-title {
        font-size: 40rpx;
      }

      .option-item:last-child {
        margin-bottom: 0;
      }

      .option-item {
        padding: 30rpx 0;

        .left {
          flex: 0.5;

          image {
            width: 50rpx;
            height: 50rpx;
          }
        }

        .right {
          flex: 4;
          border-bottom: 1rpx solid #e6bd4e;
          box-sizing: border-box;
          padding-bottom: 20rpx;

          .name {
            color: #222;
          }

          .row-right {
            image {
              width: 14rpx;
              height: 22rpx;
            }
          }
        }
      }
    }
  }

  .money {
    margin: 20rpx 0 20rpx 0;
    position: relative;

    .one-bg {
      width: 692rpx;
      height: 210rpx;
    }

    .money-box {
      box-sizing: border-box;
      padding: 30rpx;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      width: 692rpx;
      height: 210rpx;

      .m-left {
        .title {
          font-size: 40rpx;
        }

        .money {
          font-size: 45rpx;
          font-weight: 900;
        }
      }

      .m-right {
        border: 6rpx solid #000000;
        width: 180rpx;
        height: 70rpx;
        background-color: #805e09;
        color: #fff;
      }
    }
  }
}
</style>